<!DOCTYPE html>
<!-- 
	https://blog.csdn.net/qq_40575302/article/details/119296671
	
	display:inline，display:inline-block,display:block是什么？行内元素和块级元素的具体区别是什么？
	https://blog.csdn.net/qq_51066068/article/details/123782668
 -->
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.demo a{
				float: left;
				display: block;
				height: 50px;
				width: 50px;
				border-radius: 10px;
				background: aqua;
				text-align: center;
				text-decoration: none;
				margin-right: 20px;
				font: bold 20px/50px Arial;
			}
			
			  /* 等于符号：=    ；*/
			  a[id = first]{
				  background: yellow;
			  }
			  /* 包含符号：*=   ；*/
			  a[class *= "links"]{
				  background: red;
			  }
			  
			  /* ^=表示http开头*/
			  a[href ^= http]{
				  background: chartreuse;
			  }
			  
			  /* $=表示html结尾*/
			  a[href $= html]{
				  background: indigo;
			  }
			  
			  
		</style>
	</head>
	<body>
		<p class="demo">
			<a href="https://www.baidu.com" class="links item first" id="first">1</a>
			<a href="" class="item active" target="_blank" title="test">2</a>
			<a href="h01.html" class="links item">3</a>
			<a href="../images/baidu.png" class="item">4</a>
			<a href="h02.html" class="item">5</a>
			<a href="" class="links">6</a>
		</p>
	</body>
</html>